<!--
 * @Author: xiongang 407700216@qq.com
 * @Date: 2022-07-09 16:45:31
 * @LastEditors: cool panda
 * @LastEditTime: 2024-01-02 23:12:27
 * @FilePath: \big-screen-vue-datav\src\views\weather.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="oil-view d-flex">
    <div class="oil-left">
      <div class="svg-view">
        <svg-icon icon-class="bg" style="width: 70px; height: 54px"></svg-icon>
        <div class="oil-num-box">
          <div class="oil-num">
            <div class="num" :style="{ height: oilH + 'px' }">
              <svg-icon
                icon-class="bt"
                style="
                  width: 49px;
                  height: 4px;
                  left: 0;
                  top: 0;
                  position: absolute;
                  z-index: 1;
                "
                size="100"
              ></svg-icon>
            </div>
          </div>
        </div>
      </div>
      <div v-if="oilData.TANK_TYPE" class="title-box">
        <div class="title">{{ oilData.TankCode }}({{ oilData.TANK_TYPE }})</div>
      </div>
      <div v-else class="title-box">
        <div class="title">{{ oilData.TankCode }}</div>
      </div>
    </div>
    <div class="oli-line"></div>
    <div class="oil-right">
      <!-- <div class="text-line">
        <div class="lable">状态</div>
        <div class="text"></div>
      </div> -->
      <div class="text-line">
        <div class="lable">液位</div>
        <div class="text">{{ oilData.OilLevel.toFixed() }} mm</div>
      </div>
      <div class="text-line">
        <div class="lable">温度</div>
        <div class="text">{{ oilData.Temperature.toFixed(2) }} ℃</div>
      </div>
      <div class="text-line">
        <div class="lable">体积</div>
        <div class="text">{{ oilData.Volume.toFixed(2) }} m³</div>
      </div>
      <!-- <div class="text-line">
        <div class="lable">储存天数</div>
        <div class="text"></div>
      </div> -->
      <!-- <div class="text-line">
        <div class="lable">化验单号</div>
        <div class="text"></div>
      </div> -->
      <!-- <div class="text-line">
        <div class="lable">合同号船名</div>
        <div class="text"></div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    oilData: {
      type: Object,
      default: () => [],
    },
  },
  data() {
    return {
      list: [
        {
          ID: 2,
          TANK_CODE: "1#",
          MAX_HEIGHT: 14381,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 3,
          TANK_CODE: "2#",
          MAX_HEIGHT: 14465,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 4,
          TANK_CODE: "3#",
          MAX_HEIGHT: 14410,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 5,
          TANK_CODE: "4#",
          MAX_HEIGHT: 14514,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 6,
          TANK_CODE: "5#",
          MAX_HEIGHT: 14436,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 7,
          TANK_CODE: "6#",
          MAX_HEIGHT: 14423,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 8,
          TANK_CODE: "7#",
          MAX_HEIGHT: 16145,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 10,
          TANK_CODE: "8#",
          MAX_HEIGHT: 16157,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 11,
          TANK_CODE: "9#",
          MAX_HEIGHT: 16166,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 12,
          TANK_CODE: "10#",
          MAX_HEIGHT: 16153,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 13,
          TANK_CODE: "11#",
          MAX_HEIGHT: 16159,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 14,
          TANK_CODE: "12#",
          MAX_HEIGHT: 16164,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 15,
          TANK_CODE: "13#",
          MAX_HEIGHT: 16110,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 16,
          TANK_CODE: "14#",
          MAX_HEIGHT: 16110,
          TANKSET_NAME: "使用油库",
        },
        {
          ID: 17,
          TANK_CODE: 1701,
          MAX_HEIGHT: 16000,
          TANKSET_NAME: "高桥罐区",
        },
        {
          ID: 18,
          TANK_CODE: 1702,
          MAX_HEIGHT: 16100,
          TANKSET_NAME: "高桥罐区",
        },
        {
          ID: 19,
          TANK_CODE: 1703,
          MAX_HEIGHT: 16100,
          TANKSET_NAME: "高桥罐区",
        },
        {
          ID: 20,
          TANK_CODE: 1704,
          MAX_HEIGHT: 15000,
          TANKSET_NAME: "高桥罐区",
        },
        {
          ID: 21,
          TANK_CODE: 1705,
          MAX_HEIGHT: 9500,
          TANKSET_NAME: "高桥罐区",
        },
        {
          ID: 22,
          TANK_CODE: 1706,
          MAX_HEIGHT: 14200,
          TANKSET_NAME: "高桥罐区",
        },
        {
          ID: 24,
          TANK_CODE: "T101",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 25,
          TANK_CODE: "T102",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 26,
          TANK_CODE: "T103",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 27,
          TANK_CODE: "T104",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 28,
          TANK_CODE: "T105",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 29,
          TANK_CODE: "T106",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 30,
          TANK_CODE: "T107",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 31,
          TANK_CODE: "T108",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 33,
          TANK_CODE: "T201",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 34,
          TANK_CODE: "T202",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 35,
          TANK_CODE: "T203",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 36,
          TANK_CODE: "T204",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 37,
          TANK_CODE: "T205",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 38,
          TANK_CODE: "T206",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 39,
          TANK_CODE: "T301",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 40,
          TANK_CODE: "T302",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 41,
          TANK_CODE: "T303",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 42,
          TANK_CODE: "T304",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 43,
          TANK_CODE: "T305",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 44,
          TANK_CODE: "T306",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 39,
          TANK_CODE: "T301",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 40,
          TANK_CODE: "T302",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 41,
          TANK_CODE: "T303",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 42,
          TANK_CODE: "T304",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 43,
          TANK_CODE: "T305",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
        {
          ID: 44,
          TANK_CODE: "T306",
          MAX_HEIGHT: 20000,
          TANKSET_NAME: "浦航罐区",
        },
      ],
    };
  },
  computed: {
    oilH() {
      const item = this.list.find((e) => e.TANK_CODE == this.oilData.TankCode);
      if (item) {
        return (this.oilData.OilLevel / item.MAX_HEIGHT) * 32;
      } else {
        console.log("没有找到", this.oilData.TankCode)
        return 0
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$box-width: 180px;
$box-height: 90px;

.oil-view {
  height: $box-height;
  width: $box-width;
  display: flex;
  align-items: center;
  justify-content: center;
  .oil-left {
    transform: translateX(15px);
    width: 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // padding: 35px;
    .svg-view {
      position: relative;
      .oil-num-box {
        width: 49px;
        position: absolute;
        left: 10px;
        top: 14px;
        .oil-num {
          height: 32px;
          position: relative;
          overflow: hidden;
          border-radius: 0 0 60% 60%/0 0 30% 30%;
        }
        .num {
          width: 100%;
          height: 0px;
          position: absolute;
          left: 0%;
          bottom: 0;
          z-index: 0;
          background: red;
          border-radius: 60% 60% 0 0/10% 10% 0 0;
        }
      }
    }
    .title-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -7px;
      // width: 50px;
      // height: 14px;
      // background: linear-gradient(
      //   180deg,
      //   #002c41 0%,
      //   rgba(0, 30, 54, 0.5) 24%,
      //   rgba(0, 10, 37, 0) 50%,
      //   rgba(0, 23, 48, 0.5) 79%,
      //   #002139 100%
      // );
      //   box-shadow: inset 0px 0px 1px 0px rgba(0, 224, 219, 1);
      // border: 1px solid rgba(35, 255, 249, 0.63);
      .title {
        width: 1500%;
        word-break: keep-all;
        max-width: 150px;
        transform: scale(0.6);
        font-size: 13px;
        color: #00e0db;
        border-bottom: 1px solid rgba(35, 255, 249, 0.54);
      }
      .desc{
        position: absolute;
        transform: scale(0.6);
        font-size: 12px;
        right:0;
      }
    }
  }
  .oli-line {
    width: 1px;
    height: 60px;
    background: rgba(22, 204, 204, 0.2);
    transform: translateX(25px);
  }
  .oil-right {
    transform: scale(0.6) translateX(30px);
    width: 58%;
    // padding: 0 2%;
    .text-line {
      display: flex;
      //   padding: 10px;
      margin: 4px 0;
      .lable {
        margin-right: 3px;
        font-size: 12px;
      }
      .text {
        font-size: 12px;
        color: #2791d8;
      }
    }
  }
}
</style>
